<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精灵旅社</title>
  <link rel="stylesheet" href="./幕后花絮.css">
</head>

<body>
  <header>
    <a href="#" class="logo">HouEr</a>
    <ul>
      <li><a href="./概要.html">概要</a></li>
      <li><a href="./人物介绍.html">人物介绍</a></li>
      <li><a href="./幕后花絮.html" class="active">幕后花絮</a></li>
      <li><a href="./last.html">台词</a></li>
    </ul>
  </header>
  <div class="container" style="--t:20s">
    <div>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Younis</span>
      <span>Slim</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
    </div>
    <div>
      <span>Murray</span>
      <span>Younis</span>
      <span>Slim</span>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
    </div>
  </div>
  <div class="container" style="--t:40s">
    <div>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
      <span>Younis</span>
      <span>Slim</span>
    </div>
    <div>
      <span>Frank</span>
      <span>Murray</span>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Younis</span>
      <span>Slim</span>
    </div>
  </div>
  <div class="container" style="--t:15s">
    <div>
      <span>Younis</span>
      <span>Slim</span>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
    </div>
    <div>
      <span>Dracula</span>
      <span>Murray</span>
      <span>Younis</span>
      <span>Slim</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
    </div>
  </div>
  <div class="container" style="--t:50s">
    <div>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
      <span>Younis</span>
      <span>Slim</span>
    </div>
    <div>
      <span>Dracula</span>
      <span>Younis</span>
      <span>Slim</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
    </div>
  </div>
  <div class="container" style="--t:30s">
    <div>
      <span>Murray</span>
      <span>Younis</span>
      <span>Slim</span>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
    </div>
    <div>
      <span>Younis</span>
      <span>Slim</span>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
    </div>
  </div>
  <div class="main" style="--t:50s">
    <div>
      <span>呆萌角色创作</span>
      <span>3D技术制作</span>
      <span>导演确定</span>
      <span>剧本造型创作</span>
      <span>配音选择</span>
    </div>
    <div>
      <span>呆萌角色创作</span>
      <span>3D技术制作</span>
      <span>导演确定</span>
      <span>剧本造型创作</span>
      <span>配音选择</span>
    </div>
  </div>
  <div class="container" style="--t:20s">
    <div>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Younis</span>
      <span>Slim</span>
    </div>
    <div>
      <span>Dracula</span>
      <span>Murray</span>
      <span>Younis</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Slim</span>
    </div>
  </div>
  <div class="container" style="--t:15s">
    <div>
      <span>Murray</span>
      <span>Younis</span>
      <span>Slim</span>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
    </div>
    <div>
      <span>Dracula</span>
      <span>Younis</span>
      <span>Slim</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
    </div>
  </div>
  <div class="container" style="--t:40s">
    <div>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
      <span>Younis</span>
      <span>Slim</span>
    </div>
    <div>
      <span>Frank</span>
      <span>Murray</span>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Younis</span>
      <span>Slim</span>
    </div>
  </div>
  <div class="container" style="--t:50s">
    <div>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
      <span>Younis</span>
      <span>Slim</span>
    </div>
    <div>
      <span>Dracula</span>
      <span>Younis</span>
      <span>Slim</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
    </div>
  </div>
  <div class="container" style="--t:20s">
    <div>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Younis</span>
      <span>Slim</span>
      <span>Jonathan</span>
      <span>Frank</span>
      <span>Murray</span>
    </div>
    <div>
      <span>Murray</span>
      <span>Younis</span>
      <span>Slim</span>
      <span>Dracula</span>
      <span>Mevis</span>
      <span>Jonathan</span>
      <span>Frank</span>
    </div>
  </div>
  <div class="mian-conten">
    <div class="card">
      <input type="radio" name="select" id="slide-1" checked>
      <input type="radio" name="select" id="slide-2">
      <input type="radio" name="select" id="slide-3">
      <input type="radio" name="select" id="slide-4">
      <!-- 点击按钮 -->
      <div class="slide">
        <label for="slide-1" class="slide-btn-1"></label>
        <label for="slide-2" class="slide-btn-2"></label>
        <label for="slide-3" class="slide-btn-3"></label>
        <label for="slide-4" class="slide-btn-4"></label>
      </div>
      <!-- 点击按钮 end -->
      <!-- 主体 -->
      <div class="content">
        <label class="pic">
          <img src="./images/004.jpg" width="550" class="img-1">
        </label>
        <div class="text text-1">
          <h1 class="tit">呆萌角色创作</h1>
          <p class="info">
            <br>
            《精灵旅社》最具看点的是各种各样的怪物形象和它们所做的“呆萌”事
            <br>
            戴着粉色浴帽、扭动着身躯快乐洗澡的骷髅架子
            <br>
            小到在床上看都看不到还要欢度蜜月的跳蚤新婚夫妻
            <br>
            都集结于《精灵旅社》里上演着各种搞笑故事
            <br>
            导演格恩迪·塔塔科夫斯基曾凭借《星球大战：克隆人之战》和《杰克武士》
            <br>
            获得两届艾美奖“最佳动画节目”，具有丰富的动画制作经验
            <br>
            而《精灵旅社》则是他的动画长片处女作
            <br>
            导演将夸张的风格带入到影片之中，来影响观众对影片直观的和对现实世界的感受。
          </p>
          <button class="btn">Read More</button>
        </div>
      </div>
      <div class="content">
        <label class="pic">
          <img src="./images/003.jpg" width="550" class="img-2">
        </label>
        <div class=" text text-2">
          <h1 class="tit">3D技术制作</h1>
          <p class="info">
            3D动画《精灵旅社》的制作费共花费8500万美元
            <br>
            影片不仅片延续了《冰河世纪》、《功夫熊猫》、《里约大冒险》等
            <br>
            惯有的好莱坞式喜剧风格，同时在画面处理十分细腻
            <br>3D技术的精良使观众们身临其境，代表了好莱坞顶级制作的水准
            <br>
            导演塔塔科夫斯基在CG技术的限制下，从最底层开始制作将自己与众不同的个人风格融于影片中。
          </p>
          <button class="btn">Read More</button>
        </div>
      </div>
      <div class="content">
        <label class="pic">
          <img src="./images/002.webp" width="550" class="img-3">
        </label>
        <div class="text text-3">
          <h1 class=" tit">剧本造型创作</h1>
          <p class="info">
            格恩迪·塔塔科夫斯基到了剧组之后，便重新编写电影剧本
            <br>
            同时按照自己的想象，重新设定了人物造型和性格
            <br>
            在造型上，塔塔科夫斯基从著名动画人特克斯·艾弗里的作品里寻找灵感
            <br>
            把手绘二维动画的风格转接到电脑建模的动画人物身上
            <br>
            让电影充满一种老旧、夸张和令人新鲜的风格。
            <br>
            在剧本上，格恩迪·塔塔科夫斯基给影片定下了一个“恐怖喜剧”的基调
            <br>
            使得电影不仅融合恐怖片的元素，又能逗笑观众。
          </p>
          <button class="btn">Read More</button>
        </div>
      </div>
      <div class="content">
        <label class="pic">
          <img src="./images/001.webp" width="550" class="img-4">
        </label>
        <div class="text text-4">
          <h1 class=" tit">导演确定</h1>
          <p class="info">
            2006年，索尼公司就准备拍摄一部怪物和人类亲密接触的动画片，这便是影片《精灵旅社》。
            <br>
            立项开始时，索尼公司确定的是拍摄了《丛林大反攻》的安东尼·斯塔奇
            <br>
            活跃在电视圈的大卫·菲斯来执导这部电影，可是电影并没有成功开拍。
            <br>
            2008年，索尼公司又找来了同是《丛林大反攻》的导演之一的吉尔·卡尔顿来执导
            <br>
            不幸的是卡尔顿最终还是离开了剧组。2011年，格恩迪·塔塔科夫斯基接手执导这部电影
            <br>
            而《精灵旅社》便成为塔塔科夫斯基个人的第一部影片。
          </p>
          <button class="btn">Read More</button>
        </div>
      </div>
    </div>
  </div>
  <div class="footer"></div>
</body>

</html>